<template>
  <div class="mask">


    <div class="box">
      <div class="p1">
        <h3>提示</h3>
        <el-icon @click="close">
          <close-bold />
        </el-icon>
      </div>
      <div class="p2">
        <img
          src="https://img.axureshop.com/0e/a4/ac/0ea4ac0fe33148ab863f5e2758608948/images/%E6%89%BF%E5%BB%BA%E5%95%86%E7%99%BB%E8%AE%B0/u168.png"
          alt="">
        <span>确定要启用该账号么?</span>
      </div>

      <div class="but">
        <el-form-item>
          <el-button type="primary" style="background-color: #FF9900; border: none;" @click="confirm">确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CloseBold } from "@element-plus/icons";
import { ElMessage } from "element-plus";
import service from "../../../utils/service";

// 声明属性
const props = defineProps<{
  id: number;
  status: string;
}>();
// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();
// 取消
const close = () => {
  // 触发隐藏事件
  emit("hide");
};

// 点击启用账号
const confirm = () => {
  const fan = props.status ? 1 : 2
  console.log(fan);
  
  service({
    url: "/adminlist/" + props.id,
    method: "patch",
    data: {
      "status":fan,
    }
  }).then((res) => {
    
  });
  ElMessage({
    message: "启用成功！",
    type: "success",
  });
  emit("hide");
  emit("updatesuccess");

}
// console.log(props.id);
// console.log(props.status);

</script>

<style scoped>
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.box {
  width: 600px;
  height: 200px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 999;
}

.p1 {
  font-size: 20px;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p1 h3 {
  font-size: 16px;
  color: #666;
  font-weight: 800;

}

.p2 {
  width: 400px;
  height: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-left: 80px;

}

.p2 img {
  width: 30px;
  height: 30px;
}

.p2 span {
  font-size: 18px;
  color: #666666;
  font-weight: 800;
}

.but {
  margin-top: 32px;
  margin-left: 420px;
}
</style>